<template>
  <el-form-item label="栅格类型" v-if="selectedWidget.type == 'grid'">
    <el-radio-group v-model="optionModel.gridType">
      <el-radio-button label="栅格" value="grid" />
      <el-radio-button label="表单" value="form" />
    </el-radio-group>
  </el-form-item>
  <el-form-item label="Key">
    <el-input v-model="optionModel.fieldName"></el-input>
  </el-form-item>
  <el-form-item label="保存主表">
    <el-input v-model="optionModel.masterRecordTableName"></el-input>
  </el-form-item>
  <el-form-item label="保存子表">
    <el-input v-model="optionModel.childRecordTableName"></el-input>
  </el-form-item>
  <el-form-item label="工具栏">
    <el-switch v-model="optionModel.toolBar.show"></el-switch>
  </el-form-item>
  <el-form-item label="加载顺序">
    <el-input-number v-model="optionModel.showIndex"></el-input-number>
  </el-form-item>
  <el-form-item label="展示标题">
    <el-switch v-model="optionModel.frame.showTitle"></el-switch>
  </el-form-item>
  <el-form-item label="标题">
    <el-input v-model="optionModel.frame.title"></el-input>
  </el-form-item>
  <el-form-item label="标题对齐">
    <el-radio-group v-model="optionModel.frame.titleAlign">
      <el-radio-button label="居左" value="left" />
      <el-radio-button label="居中" value="center" />
      <el-radio-button label="居右" value="right" />
    </el-radio-group>
  </el-form-item>
  <el-form-item label="二级标题">
    <el-input v-model="optionModel.frame.subTitle"></el-input>
  </el-form-item>
  <el-form-item label="是否缩放">
    <el-switch v-model="optionModel.frame.resizeAble"></el-switch>
  </el-form-item>
  <el-form-item label="可否拖动">
    <el-switch v-model="optionModel.frame.dragAble"></el-switch>
  </el-form-item>
  <el-form-item label="最大最小">
    <el-switch v-model="optionModel.frame.maxMinAble"></el-switch>
  </el-form-item>
  <el-form-item label="可否打印">
    <el-switch v-model="optionModel.frame.printAble"></el-switch>
  </el-form-item>
  <el-form-item label="是否全屏">
    <el-switch v-model="optionModel.frame.fullScreen"></el-switch>
  </el-form-item>
  <el-form-item label="填写说明">
    <el-button type="primary"  @click="editFillText()">编辑描述</el-button>
  </el-form-item>
  <el-divider class="custom-divider-margin-top">返回数据</el-divider>
  <el-form-item label="参数拼接">
    <el-switch v-model="optionModel.returnParams.split"></el-switch>
  </el-form-item>
  <el-form-item label-width="0">
    <div v-for="(item,index) in optionModel.returnParams.args" :key="index" style="width: 100%">
      <el-input v-model="optionModel.returnParams.args[index]" size="small"
                style="width: 200px;margin: 10px;margin-top: 0px"></el-input>
      <el-button circle plain size="small" type="danger"
                 icon="el-icon-minus" class="col-delete-button" @click="deleteReturnParams(index)"></el-button>
    </div>
    <el-button link type="primary" @click="addReturnParams" style="margin-left: 10px;">增加参数</el-button>
  </el-form-item>
  <el-divider class="custom-divider-margin-top">顶部按钮</el-divider>
  <el-form-item label-width="0">
    <div v-for="(item,index) in optionModel.btnBar.topBtns" :key="index" style="width: 100%;margin-bottom: 5px">
      <el-button type="primary" style="min-width: 150px" @click="editBtn('top',item,index)">{{ item.showName }}</el-button>
      <el-button circle plain size="small" type="danger"
                 icon="el-icon-minus" class="col-delete-button" @click="deleteBtns('top',index)"></el-button>
    </div>
    <el-button link type="primary" @click="addBtn('top')" style="margin-left: 10px;">增加按钮</el-button>
  </el-form-item>
  <el-divider class="custom-divider-margin-top">内部按钮</el-divider>
  <el-form-item label-width="0">
    <div v-for="(item,index) in optionModel.btnBar.inBtns" :key="index" style="width: 100%;margin-bottom: 5px">
      <el-button type="primary" style="min-width: 150px" @click="editBtn('in',item,index)">{{ item.showName }}</el-button>
      <el-button circle plain size="small" type="danger"
                 icon="el-icon-minus" class="col-delete-button" @click="deleteBtns('in',index)"></el-button>
    </div>
    <el-button link type="primary" @click="addBtn('in')" style="margin-left: 10px;">增加按钮</el-button>
  </el-form-item>
  <el-divider class="custom-divider-margin-top">底部按钮</el-divider>
  <el-form-item label-width="0">
    <div v-for="(item,index) in optionModel.btnBar.bottomBtns" :key="index" style="width: 100%;margin-bottom: 5px">
      <el-button type="primary" style="min-width: 150px" @click="editBtn('bottom',item,index)">{{ item.showName }}</el-button>
      <el-button circle plain size="small" type="danger"
                 icon="el-icon-minus" class="col-delete-button" @click="deleteBtns('bottom',index)"></el-button>
    </div>
    <el-button link type="primary" @click="addBtn('bottom')" style="margin-left: 10px;">增加按钮</el-button>
  </el-form-item>
  <el-dialog title="编辑按钮" v-model="openBtn" width="1200" append-to-body>
    <el-form ref="btnForm" :model="btnForm" :rules="btnRules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="按钮ID" prop="btnId">
            <el-input v-model="btnForm.btnId" placeholder="请输入按钮ID"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮类型" prop="btnType">
            <el-select v-model="btnForm.btnType" placeholder="请输入按钮类型" clearable filterable @change="changeBtnType">
              <el-option
                  v-for="item in btnTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮名称" prop="showName">
            <el-input v-model="btnForm.showName" placeholder="请输入按钮名称" :disabled="btnForm.btnType != 'custom'"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽度" prop="width">
            <el-input v-model="btnForm.width" placeholder="请输入宽度"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度" prop="height">
            <el-input v-model="btnForm.height" placeholder="请输入高度"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图标" prop="icon">
            <el-input v-model="btnForm.icon" placeholder="请输入图标"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="展示顺序" prop="ord">
            <el-input-number v-model="btnForm.ord" placeholder="请输入展示顺序" style="width: 200px"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="窗口号" prop="winNo">
            <el-input v-model="btnForm.winNo" placeholder="请输入窗口号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="功能号" prop="funcNo">
            <el-input v-model="btnForm.funcNo" placeholder="请输入功能号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色代码" prop="btnRoles">
            <el-input v-model="btnForm.btnRoles" placeholder="请输入角色代码"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行存储过程" prop="callProc">
            <el-switch v-model="btnForm.callProc"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="跳转组件" prop="component">
            <el-input v-model="btnForm.component" placeholder="请输入跳转组件"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="btnForm.callProc">
          <el-form-item label="存储过程" prop="proc">
            <el-input type="textarea" v-model="btnForm.proc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="submitBtnForm">确 定</el-button>
      <el-button @click="openBtn = false">取 消</el-button>
    </div>
  </el-dialog>
  <el-dialog title="填写说明" v-model="openText" width="1200" append-to-body>
    <quill-editor
        ref="fieldEditor"
        :options="editorOptions"
        style="height: 500px;margin-bottom: 30px"
        v-model:value="helpDocument"></quill-editor>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="submitTextForm">确 定</el-button>
      <el-button @click="openText = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {generateId} from "@/utils/util"
import { Quill, quillEditor } from 'vue3-quill'

export default {
  name: "tableData-editor",
  componentName: 'PropertyEditor',
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      openText:false,
      helpDocument:"",
      openBtn: false,
      btnForm: {},
      btnTypeOptions:[
        {
          value: 'save',
          label: '保存',
        },
        {
          value: 'add',
          label: '新增',
        },
        {
          value: 'delete',
          label: '删除',
        },
        {
          value: 'update',
          label: '修改',
        },
        {
          value: 'cancel',
          label: '取消',
        },
        {
          value: 'print',
          label: '打印',
        },
        {
          value: 'printview',
          label: '打印预览',
        },
        {
          value: 'history',
          label: '查看历史',
        },
        {
          value: 'search',
          label: '查询',
        },
        {
          value: 'loadLastRec',
          label: '加载上一条记录',
        },
        {
          value: 'custom',
          label: '自定义',
        },
      ],
      buttonMode:null,
      buttonType:null,
      buttonIndex:0,
      btnRules: {
        btnId: [
          { required: true, message: '按钮ID必填', trigger: 'blur' }
        ],
        showName: [
          { required: true, message: '按钮名称必填', trigger: 'blur' }
        ],
      },
      editorOptions:{
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']                                         // remove formatting button
          ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
      }
    }
  },
  computed: {},
  created() {
  },
  methods: {
    addReturnParams() {
      this.optionModel.returnParams.args.push("")
    },
    deleteReturnParams(index) {
      this.optionModel.returnParams.args.splice(index, 1)
    },
    addBtn(mode) {
      this.btnForm = {
        btnId: "btn" + generateId(),
        ord:0,
      }
      this.openBtn = true
      this.buttonMode = "add";
      this.buttonType = mode;
    },
    editBtn(type,btn,index){
      this.btnForm = {...btn}
      this.openBtn = true
      this.buttonMode = "edit";
      this.buttonType = type;
      this.buttonIndex = index;
    },
    submitBtnForm() {
      this.$refs['btnForm'].validate(valid => {
        if (valid) {
          if (this.buttonMode == "add") {
            if (this.buttonType == 'top'){
              this.optionModel.btnBar.topBtns.push({...this.btnForm})
            }else if (this.buttonType == 'in'){
              this.optionModel.btnBar.inBtns.push({...this.btnForm})
            }else if (this.buttonType == 'bottom'){
              this.optionModel.btnBar.bottomBtns.push({...this.btnForm})
            }
            this.openBtn = false;
          }else {
            if (this.buttonType == 'top'){
              this.optionModel.btnBar.topBtns[this.buttonIndex] = {...this.btnForm}
              console.log(this.optionModel.btnBar.topBtns)
              console.log(12321321312)
            }else if (this.buttonType == 'in'){
              this.optionModel.btnBar.inBtns[this.buttonIndex] = {...this.btnForm}
            }else if (this.buttonType == 'bottom'){
              this.optionModel.btnBar.bottomBtns[this.buttonIndex] = {...this.btnForm}
            }

            this.openBtn = false;
          }
        }
      })
    },
    deleteBtns(mode,index) {
      if (mode == 'top'){
        this.optionModel.btnBar.topBtns.splice(index, 1)
      }else if (mode == 'in'){
        this.optionModel.btnBar.inBtns.splice(index, 1)
      }else if (mode == 'bottom'){
        this.optionModel.btnBar.bottomBtns.splice(index, 1)
      }
    },
    changeBtnType(val){
      let btnTypeOptionsMap = {}
      this.btnTypeOptions.forEach(function (value) {
        btnTypeOptionsMap[value.value] = value.label
      })
      let btnName = btnTypeOptionsMap[val]
      this.btnForm.showName = btnName;
    },
    editFillText(){
      this.openText = true;
      this.helpDocument = this.optionModel.frame.helpDocument
    },
    submitTextForm(){
      this.openText = false;
      this.optionModel.frame.helpDocument = this.helpDocument
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
